<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div>
    <p>p1</p>
    <p>p2</p>
</div>
<h1>这是h1</h1>
<h2>这是h2</h2>
<a href="http:www.baidu.com">超链接</a>
<!--引入jQuery框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    //创建元素对象
    let h3 = $("<h3>我是新来的h3</h3>");
    //添加元素到页面中
    $("body").append(h3);
    //删除元素对象
    $("h1").remove();
    //修改元素的样式
    h3.css("color","red");
    //修改元素的属性   attr=attribute属性
    $("a").attr("href","http://www.tmooc.cn");
    //获取样式和属性
    console.log(h3.css("color"));
    console.log($("a").attr("href"));
    //得到某个元素的子元素们
    $("div").children().css("color","red");
    //得到某个元素的父元素
    $("p").parent().css("background-color","blue");
    //得到某个元素的所有兄弟元素
    // $("a").siblings().remove();
    $("h2").hide(); //让元素隐藏
    $("h2").show(); //让元素显示

</script>
</body>
</html>